{% extends "base.html" %}
{% load admin_static %}{% load url from future %}{% load i18n grp_tags %}


{% block head %}
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="/static/js/jquery-ui.js"></script>
<script>
	$(function() {
		$(".vDateField").datepicker();
		$("#format" ).change(function() {
			$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
		});
	});
</script>
<link rel="stylesheet" href="/static/css/smoothness/jquery-ui.css" type="text/css" />
{% endblock %}

{% block content %}        
    <div class="fixed-width"> 
        <h1>Service Hours Record Sheet</h1>
	<br />
         <p class="instructions"><b><u>INSTRUCTIONS:</u></b> Please fill in all the hours you have completed.
         Note the date and number of hours you completed on that date to the best of your ability.  You DO NOT need to print this form.</p>
         <br/>
        <form action="" name = "volunteer form" onsubmit="" method="post">
            <table style="width:100%;">
                <tr>
                   <td style="width:49%;">
                        <fieldset>
                            <legend>{{ student }}</legend>
                            <p>Service site: {{ volunteer_site.site }}</p> 
                            <p>Supervisor: {{ volunteer_site.supervisor }} </p> 
                            <p>Hours at Site: {{ volunteer_site.hours_at_site }}</p>
                            <p>Total hours completed: {{ student.hours_completed }} </p>
                            <p>Hours required: {{ student.hours_required }} </p> 
                        </fieldset>
                   </td>
                   <td style="width:49%;">
                        <table>
                            {{ form }}
                        </table>
                   </td>
                </tr>
            </table>
            <input class="button" type="submit" value="Click Here to Save Your Work"/>
            
        </form> 
	</div> 

{% endblock %}
